/**
	该配置文件是发布时的配置文件, 就是项目要发布出去时使用的打包配置
	有些插件因为版本更新迭代快, 版本不适应然后运行不了, 没有注释的都可以使用
*/

const path = require('path');
/*导入 将html在内存中生成 的插件*/
const HtmlWebpackPlugin = require('html-webpack-plugin');
/*导入 重构时删除资源目录 的插件*/
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
/*导入vue的插件 -- @15以后的vue-loader需要的插件*/
const VueLoaderPlugin = require('vue-loader/lib/plugin.js');
/*导入 webpack模板*/
// const webpack = require('webpack');
/*导入 抽取css文件 的插件*/
// const ExtractTextPlugin = require('extract-text-webpack-plugin');
/*导入 压缩抽取出来的CSS文件*/
// const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');


/*
	注意: 这里使用的是Node中的语法, 向外暴露了一个配置对象
	因为 webpack 这个构建工具, 底层就是使用Node.js开发出来的
*/
module.exports = {
	entry: { // 该配置中的 key 可以不是 app 和 cendors
		app: path.join(__dirname, './src/main.js'), // 指定处理自己的JS文件路径
		vendors: ['vue', 'vuex', 'vue-router', 'axios', 'mint-ui']	// 要分离的第三方包的入口
	},	
	output: {// 指定输出文件的配置
		path: path.join(__dirname, './dist'), // 指定输出文件的存放路径
		filename: './js/[name].js' // 指定输出到指定文件夹下的指定名称
	},
	plugins: [ // 插件的数组
		/*重构目录的插件*/
		new CleanWebpackPlugin(), // 默认找到 output.path 指定的文件夹
		/*将html托管到内存中的插件*/
		new HtmlWebpackPlugin({ // 创建一个把 HTML 首页托管到内存中的插件
			template: path.join(__dirname, './src/index.html'), // 把要托管的html文件作为模板， 复制一份托管到内存中
			filename: 'index.html' ,// 指定将来在内存中复制出来的页面， 名称为 index.html
			/*压缩HTML代码*/
			minify: {
				coLlapseWhitespace: true, // 合并空白字符
				removeComments: true ,// 移除注释
				removeAttributeQuotes: true // 移除属性上的引号
			}
		}),
		/*vue处理插件*/
		new VueLoaderPlugin(),
		/*抽离第三方包的插件*/
		// new webpack.optimize.CommonsChunkPlugin({
		// 	name: 'vendors', // 指定抽离第三方包的入口名称, 需要对应名称
		// 	filename: 'vendors.js'	// 抽离出的公共模板名称
		// }),
		/*优化压缩JS*/
		// new webpack.optimize.UglifyJSplugin({
		// 	compress: {
		// 		warnings: false // 移除警告, 就是无法错误的判断
		// 	}
		// }),
		/*抽取CSS文件的插件*/
		// new ExtractTextPlugin("css/styles.css"),
		/*压缩抽取出来的CSS文件*/
		// new OptimizeCssAssetsPlugin(),
	],
	module: { // 用来配置 非JS文件对应的loader
		rules: [ // 就是配置 非 JS文件 和 loader 之间的关系
			/*加载器数组中执行顺序是 -> 从后往前执行, 并且执行顺序固定*/
			{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 利用正则表达式来匹配css文件, 然后交由对应的加载器
			// { test: /\.css$/, use: ExtractTextPlugin.extract({
			// 	fallback: "style-loader", // 最后一个执行的处理器
			// 	use: ['css-loader'], // 需要使用的处理器
			// 	publicPath: '../'	// 设置样式中的图片路径
			// }) }, //抽取css文件写法
			/*配置 less 样式文件的加载规则*/
			{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 需要下载对应的 loader 包
			/*配置 scss 样式文件的加载规则*/
			{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, 
			/*配置 图片 加载规则
				该加载器有两个配置参数:
				其一: limit(极限值), 传入的是图片的大小, 单位Bite字节
					表示: 如果指定了了limit参数, 则只有 图片的大小 < 给定值 的时候, 才会转为base64格式的图片
						否则就不转换, 不转换就是去请求图片路径
				其二: name(文件名), 可以修改文件在url中显示的地址名称
					要求: 只有是http本地地址才能修改, base64不能修改
						[name]表示文件原来的名字
						[ext]表示源文件的后缀
						[hash:长度]表示取该文件hash值的前几位(总长度为32位字符串)*/
			// { test: /\.png|jpg|gif$/, use: 'url-loader?limit=5864&name=images/[hash:7].[ext]' },// name中可以指定目录文件
			{ test: /\.png|jpg|gif$/, use: [{ loader: 'url-loader',
					options: {
						limit: 10240,
						fallback: {
							loader: 'file-loader',
							options: {
								name: 'images/[name].[contenthash:8].[ext]',
								esModule: false
							}
						},
						esModule: false
					}
				}]},
			/*配置 babel 高级JS语法 的加载器
				exclude参数是用于排除加载已经打包好的 js文件, 不填的话, 那么加载很会慢并且页面会报错*/
			{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
			/*配置 vue 文件 的加载器*/
			{ test: /\.vue$/, use: 'vue-loader' },
			/*配置 样式中字体文件路径的问题*/
			{ test: /\.ttf|woff|woff2|eot|svg$/, use: 'url-loader' },
		]
	},
	mode: 'development' // 设置mode
}